import React, { useState, useEffect } from 'react'
import {Input, Button, message, Descriptions} from "antd";
import {fetchRequest} from "../../../utils/Request";
import {url} from "../../../utils/url";
import {useRequest} from "@umijs/hooks";

interface requestParams{
    newAccDeviceCode:string,
    oldAccDeviceCode:string
}

export default function EquipmentChange() {

    const [requestParams, setRequestParams] = useState<requestParams>({ newAccDeviceCode: '', oldAccDeviceCode:''});

    const changeDevice = useRequest(changeDeviceRequest, {
        manual: true,
        loadingDelay: 200
    })

    const newAccOnChange = (e:any) =>{
        setRequestParams({
             ...requestParams,
             newAccDeviceCode: e.target.value.toString()
        })
    }

    const oldAccOnChange = (e:any) =>{
        setRequestParams({
            ...requestParams,
            oldAccDeviceCode: e.target.value.toString()
        })
    }

    const changeOnClick = () => {
        changeDevice.run(requestParams);
    }

    //请求函数
    async function changeDeviceRequest(params: requestParams) {
        // console.log(params)
        try {
            const json = await fetchRequest(url.DEVICE_CHANGE, params)
            if (json.success) {
                message.success(json.data);
            } else {
                message.destroy();
                message.error(json.errorMsg);
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message);
        }
    }

    const checkDeviceTypeSame = useRequest(checkDeviceTypeSameRequest, {
        manual: true,
        loadingDelay: 200
    })

    //判断设备是否为同一类型
    async function checkDeviceTypeSameRequest(params: requestParams) {
        // console.log(params)
        try {
            const json = await fetchRequest(url.CHECK_DEVICE_TYPE_SAME, params)
            if (json.success) {
                message.success(json.data);
            } else {
                message.destroy();
                message.error(json.errorMsg);
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message);
        }
    }

    return (
        <div style={{ margin: '10px', padding: "14px"}}>
            <Descriptions title="设备替换说明" bordered column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }} layout="vertical">
                <Descriptions.Item label="操作场景">将老设备直接替换为新设备</Descriptions.Item>
                <Descriptions.Item label="操作表名">access_card_dev_rel</Descriptions.Item>
                <Descriptions.Item label="操作说明">
                    将表中老设备编码更改为新设备编码，并将状态改为4，put_count改为0，下发数据
                </Descriptions.Item>
                <Descriptions.Item label="状态说明">4-待推送</Descriptions.Item>
            </Descriptions>
            <div style={{ margin: '16px 0 16px', width:'60%'}}>
                <Input size="large" addonBefore="新设备" placeholder="请输入新设备编码" onChange={ newAccOnChange }/>
            </div>
            <div style={{ marginBottom: 16, width:'60%' }}>
                <Input size="large" addonBefore="老设备" placeholder="请输入老设备编码" onChange={ oldAccOnChange }/>
            </div>
            <Button size="large" type="primary" loading={ changeDevice.loading } onClick={ changeOnClick }>
                提交
            </Button>
        </div>

    )


}